<template>
	<view class="center">
		<view class="logo border-bottom" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" :src="login ? userInfo.avatarUrl :avatarUrl" @click="toMyInfo()"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{login ? userInfo.name : '您未登录'}}</text>
				<text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text>
			</view>
		</view>
		
		<tui-list-view>
			<tui-list-cell @click="jump(urls.myTopic,true)" :arrow="true">
				<view class="tui-item-box">
					<tui-icon name="strategy" :size="24" color="#ff7900"></tui-icon>
					<text class="tui-list-cell_name">我的话题</text>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="jump(urls.myComment,true)" :arrow="true">
				<view class="tui-item-box">
					<tui-icon name="message" :size="24" color="#5677fc"></tui-icon>
					<view class="tui-list-cell_name">我的评论</view>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="jump(urls.myCollection,true)" :arrow="true">
				<view class="tui-item-box">
					<tui-icon name="star" :size="24" color="#5677fc"></tui-icon>
					<view class="tui-list-cell_name">我的收藏</view>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="jump(urls.personalData,true)" :arrow="true">
				<view class="tui-item-box">
					<tui-icon name="card" :size="24" color="#19be6b"></tui-icon>
					<view class="tui-list-cell_name">编辑资料</view>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="jump(urls.about,false)" :arrow="true">
				<view class="tui-item-box">
					<tui-icon name="about-fill" :size="23" color="#ed3f14"></tui-icon>
					<view class="tui-list-cell_name">关于应用</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<view class="tui-btn-box" v-show="login">
			<button @click="logout()" class="tui-button-primary" hover-class="tui-button-hover" type="primary">退出登录</button>
		</view>
	</view>
</template>

<script>
	const urls = {
		currentPage:"/pages/my/my",
		myTopic:"/pages/my/my-topics",
		myComment:"/pages/my/my-comments",
		myCollection:"#",
		personalData:"/pages/my/personal-data",
		about:"#",
		userInfo:"/pages/user/user"
	}
	import userUtils from "@/utils/userUtils.js"
	export default {
		data() {
			return {
				login: false,
				avatarUrl: "/static/images/my/default-avatar.png",
				userInfo: {
					id:'',
					name:"",
					avatarUrl: "",
				},
				urls:urls,
				loginUser:userUtils.getLoginUserInfo()
			}
		},
		created() {
			this.isLogin();
		},
		watch:{
			
		},
		methods: {
			goLogin() {
				if (!this.login) {
					uni.navigateTo({url: '/pages/login/login'});
				}
			},
			/**
			 *@param {Object} url    跳转路径
			 * @param {Object} loginCheck 是否检查登录
			 */
			jump(url,loginCheck){
				if(loginCheck){
					userUtils.loginCheck().then(()=>{
						uni.navigateTo({url: url});
					})
				}else{
					uni.navigateTo({url: url});
				}
			},
			//退出登录
			logout(){
				userUtils.logout()
				this.login = false;
				uni.reLaunch({url:"/pages/my/my"});//退出登录后，关闭其他页面
			},
			//判断用户是否登录，并给相关的对象赋值
			isLogin(){
				console.log(this.loginUser)
				if(this.loginUser == null || this.loginUser ==''){
					this.login = false;
				}else{
					this.userInfo.id = this.loginUser.id;
					this.userInfo.name = this.loginUser.nickname
					this.userInfo.avatarUrl = this.loginUser.avatar
					this.login = true
				}
			},
			//跳转到当前登录用户的个人页
			toMyInfo(){
				if(this.login){
					let url = urls.userInfo+"?id="+this.loginUser.id
					uni.navigateTo({url:url});
				}
			}
			
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #ffffff;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #000000;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #000000;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 10upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
	
	/**
	 * 按钮
	 */
	.tui-btn-box {
		padding: 150rpx 50rpx;
		box-sizing: border-box;
	}
	.tui-button-primary{
		background-color: #393D4E;
	}
	
	/**
	 * 列表图标
	 */
	.list-icon {
		width:38px;
		height:auto;
	}
	
	/**
	 * 列表项
	 */
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
</style>